<template>
  <el-dialog
    :title="tit"
    width="800px"
    class="addPB"
    style="padding-bottom: 20px !important;height：680px"
    :visible.sync="isDial" :before-close='closeDialog'
  >
    <!-- <el-tabs style="margin-top: -30px; height:470px;">
    <el-tab-pane label="基本信息">-->
    <div>
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <div class="row">
          <div class="column">
            <el-form-item size="mini" prop="name" label="楼盘名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" class="leftBorder" @input="as" autocomplete="off" :maxlength="20"></el-input>
            </el-form-item>
            <el-form-item size="mini" prop="Abbreviation" label="字母简称" :label-width="formLabelWidth">
              <el-input v-model="form.Abbreviation" autocomplete="off" :maxlength="20"></el-input>
            </el-form-item>
            <el-form-item size="mini" label="开发商" prop="developers" :label-width="formLabelWidth">
              <el-select v-model="form.developers" placeholder="请选择开发商" class="leftBorder">
                 <el-option v-for="item in $store.state.developers" :label="item.code" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item size="mini" label="楼盘地址" prop="address" :label-width="formLabelWidth">
              <el-input v-model="form.address" autocomplete="off" :maxlength="50"></el-input>
            </el-form-item>
          </div>
          <div class="column">
            <el-form-item size="mini" label="楼盘划分" prop="cityAreaId" :label-width="formLabelWidth">
              <!-- <el-select v-model="form.Nickname" placeholder="请选择楼盘划分" class="leftBorder">
                <el-option v-for="item in $store.state.serveRegion" :label="item.name" :value="item.id"  v-if='item.id>0'></el-option>
              </el-select> -->
              <el-cascader size="mini" expand-trigger="hover" class="leftBorder" style="width:80%" :options="urbanArea" v-model="form.cityAreaId" placeholder="请选择商圈"  ref="arge">
              </el-cascader>
            </el-form-item>
            <el-form-item size="mini" label="物业公司" prop="Property" :label-width="formLabelWidth">
              <el-input v-model="form.Property" autocomplete="off" :maxlength="30"></el-input>
            </el-form-item>
            <el-form-item size="mini" label="地理坐标" prop="coordinate" :label-width="formLabelWidth">
              <el-input
                v-model="form.coordinate[0]+','+form.coordinate[1]"
                autocomplete="off"
                @focus="selectMap" class="leftBorder"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="row">
          <div class="column">
            <el-form-item size="mini" label="开盘均价" prop="averagePrice" :label-width="formLabelWidth">
              <el-input v-model="form.averagePrice" autocomplete="off" placeholder="元/平米" :maxlength="10" ></el-input>
            </el-form-item>
            <el-form-item size="mini" label="房屋类型" prop="type" :label-width="formLabelWidth">
              <el-select v-model="form.type" multiple placeholder="请选择">
                <el-option v-for="item in options"  :key="item.value" :label="item.label"  :value="item.value" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item size="mini" label="建筑面积" :label-width="formLabelWidth" prop="measure" >
              <el-input v-model="form.measure" autocomplete="off" :maxlength="10" placeholder="平米"></el-input>
            </el-form-item>
            <el-form-item size="mini" prop='parkingRatio' label="车位配比" :label-width="formLabelWidth">
              <el-input placeholder="1" style="width:40px !important" :disabled="true"></el-input>：
              <el-input style="width:180px !important;" v-model="form.parkingRatio" autocomplete="off" :maxlength="3" ></el-input>
            </el-form-item>
          </div>
          <div class="column">
            <el-form-item size="mini" prop='deliveryTime' label="交付时间" :label-width="formLabelWidth">
              <el-date-picker style="width:80%" v-model="form.deliveryTime" @change="getSTime" format="yyyy-MM-dd" type="date" placeholder="选择日期" ></el-date-picker>
            </el-form-item>
            <el-form-item size="mini" prop='status' label="交房状况" :label-width="formLabelWidth">
              <el-select v-model="form.status" placeholder="请选择交房状况">
                <el-option label="毛坯" value="0"></el-option>
                <el-option label="精装" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item size="mini" prop='years' label="竣工年代" :label-width="formLabelWidth">
              <el-select v-model="form.years" placeholder="请选择竣工年代">
                <el-option v-for="(item,index) in year-1970" :label="(year-item)" :value="(year-item)" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item size="mini" label="产权类型" prop='propertyRight' :label-width="formLabelWidth">
              <el-select v-model="form.propertyRight" placeholder="请选择产权类型">
                <el-option label="70年" value="3"></el-option>
                <el-option label="50年" value="2"></el-option>
                <el-option label="40年" value="1"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <el-form-item size="mini" label="备注" prop="remark" :label-width="formLabelWidth">
          <el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="form.remark" style="width:91% !important"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="saveProperties">保存</el-button>
      </div>
    </div>
    <!-- </el-tab-pane>
      <el-tab-pane label="交通">交通</el-tab-pane>
      <el-tab-pane label="学区">学区</el-tab-pane>
      <el-tab-pane label="配套">配套</el-tab-pane>
      <el-tab-pane label="图片">图片</el-tab-pane>
    </el-tabs>-->
  </el-dialog>
</template>
<script>
import {checkClass} from "../../assets/javascript/utils/checkClass.js";
import { request } from "../../assets/request.js";
import {session,pinyin} from '../../assets/session.js'
// let formInfo={
//   name: "杭州",
//   cityAreaId: "大厦", //城市区域
//   Abbreviation: "hz", //简称
//   developers: "1", //开发商
//   Property: "圣都", //物业
//   address: "联合大厦b座",
//   coordinate: [0, 0], //坐标
//   averagePrice: "1000", //开盘均价
//   deliveryTime: "2018-02-03", //交付时间
//   status: "1", //交房状况
//   measure: 100, //面积
//   years: "2000", //年代
//   parkingRatio: "1", //车位配比
//   propertyRight: "70", //产权
//   type: ['1','2']
// }

let formInfo={
  name: "",
  cityAreaId: [], //城市区域
  Abbreviation: "", //简称
  developers: "", //开发商
  Property: "", //物业
  address: "",
  coordinate: [0, 0], //坐标
  averagePrice: "", //开盘均价
  deliveryTime: "", //交付时间
  status: "", //交房状况
  measure: '', //面积
  years: "", //年代
  parkingRatio: "", //车位配比
  propertyRight: "", //产权
  type: [],
  remark:''
}
export default {
  data() {
    return {
      formLabelWidth: "80px",
      isDial: false,
      form: formInfo,
      options: this.$store.state.options,
      rules: {
        name: [
          {
            pattern: /^[\s\S]*.*[^\s][\s\S]*$/,
            required: true,
            message: "楼盘名称是必填项",
            trigger: "blur"
          }
        ],
        developers: [
          {
            pattern: /^[\s\S]*.*[^\s][\s\S]*$/,
            required: true,
            message: "开发商是必选项",
            trigger: "blur"
          }
        ],
        Nickname:[
          {
            pattern: /^[\s\S]*.*[^\s][\s\S]*$/,
            required: true,
            message: "楼盘划分必选项",
            trigger: "blur"
          }
        ]
      },
      tit: "",
      sTime: "",
      id:'',
      year:2021,
      urbanArea:this.$store.state.urbanArea, //城市区域
      selectedOptions2:[],
      cityAreaName:'',
    };
  },
  created() {
    let that = this;
    let date=new Date()
    that.year=date.getFullYear()+3
    this.$root.$on("addPB", (type, data) => {
      this.urbanArea=this.$store.state.urbanArea;   //城市区域
      that.isDial = true;
      if (type == "edit") {
        that.id=data.id;
        that.tit = "编辑楼盘";
        let url="houses/"+data.id;
        request.ajaxGet({
          url,
          that,
          fn(res){
            let type="";
            if(res.type){
              type=res.type.split(",");
            }else{
              type=[];
            }
            let urbanArea=that.urbanArea;
            let cityAreaId=[];
            for(let i in urbanArea){ //组成选中划区的   数组
              for(let j in urbanArea[i].children){
                if(urbanArea[i].children[j].id==res.cityAreaId){
                  cityAreaId.push(urbanArea[i].id);
                  cityAreaId.push(urbanArea[i].children[j].id);
                }
              }
            }
            let coordinate=[];
            coordinate.push(res.longitude);
            coordinate.push(res.latitude);
            res.developers=''+res.developers;
            let obj={
              name: res.name,
              cityAreaId, //楼盘划分
              Abbreviation: res.enSimple, //简称
              developers: res.developers, //开发商
              Property: res.propertyManagement, //物业
              address: res.address,
              coordinate: coordinate, //坐标
              averagePrice: res.averagePrice, //开盘均价
              deliveryTime: res.deliveryTime, //交付时间
              status: res.deliveryCondition, //交房状况
              measure:res.buildArea, //面积
              years: res.history, //年代
              parkingRatio: res.carConfig, //车位配比
              propertyRight: res.propertyRight.toString(), //产权
              type,
              remark:res.remark,
            }
            that.form=obj;
          }
        })
      } else if (type == "map") {
        let from = that.form;
        data = JSON.parse(data);
        from.coordinate = data;
      }else{
        that.tit = "添加楼盘";
      }
    });
  },
  methods: {
    getSTime(e) { //设置选中的时间
      let form = this.form;
      let data = new Date(e);
      data = data.getFullYear() + "-" + (data.getMonth()+1) + "-" + data.getDate();
      form.deliveryTime = data;
      // console.log(form)
      // this.form = form;
    },
    saveProperties() {
      //保存
      let that = this;
      this.$refs.ruleForm.validate(valid => {
        if(!valid){
          return
        }
        let url = "houses";
        let from = that.form;
        if(from.measure){
          if(!checkClass.checkNum(from.measure)){
            that.$message({message: "建筑面积只能是数字",type: "warning"});
            return
          }
        }
        if(from.averagePrice){
          if(!checkClass.checkNums(from.averagePrice)){
            that.$message({message: "开盘均价只能是整数或小数",type: "warning"});
            return
          }
        }
        if(from.parkingRatio){
          if(!checkClass.checkNums(from.parkingRatio)){
            that.$message({message: "车位配比只能是整数或小数",type: "warning"});
            return
          }
        }
        if(from.coordinate[0]==0 || from.coordinate[1]==0){
            that.$message({message: "地理坐标是必填项",type: "warning"});
            return
        }
        let type=''
        if(from.type){
          type=from.type.join(',')
        }
        
        let params = {
          name: from.name,
          developers: from.developers,
          cityAreaId: from.cityAreaId[1],
          enSimple: from.Abbreviation,
          propertyManagement: from.Property,
          address: from.address,
          averagePrice: from.averagePrice,
          deliveryTime: from.deliveryTime,
          type: type,
          buildArea: from.measure?parseInt(from.measure):"",
          history: from.years,
          deliveryCondition: from.status,
          propertyRight: parseInt(from.propertyRight),
          carConfig: from.parkingRatio,
          longitude: from.coordinate[0],
          latitude: from.coordinate[1],
          remark:from.remark
        };
        let met='POST'
        if(that.tit=="编辑楼盘"){
          met='PUT'
          params.id=that.id
        }
        console.log(params)
        request.ajaxPost({
          url,
          that,
          type:met,
          params,
          fn(res) {
            that.isDial = false;
            that.resetForm("ruleForm");
            if(that.tit=="编辑楼盘"){
              that.$root.$emit("refresh",'no')
            }else{
              that.$root.$emit("refresh",{page:1})
            }
          }
        });
      });
    },
    selectMap() {
      this.$root.$emit("selectMap", "no");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    closeDialog(){
      this.isDial=false
      this.resetForm("ruleForm");
    },
    // handleChange(value,name) { //联级选择器  商圈
    //     let form=this.form;
    //     form.tradingArea=value
    //     let aa=this.$refs.arge.currentLabels
    //     this.cityAreaName=aa[0]+'/'+aa[1]+'/'+aa[2]
    //     this.tradingArea=value[value.length-1]
    // },
    as(){
      let form= this.form
      let name=form.name
      let aa=pinyin.getCamelChars(name)
      form.Abbreviation=aa
    }
  },
  computed: {
    coordinate() {
      sessionStorage.getItem("lngLat");
      return sessionStorage.getItem("lngLat");
    }
  }
};
</script>
<style lang="less" scoped>
.addPB {
  text-align: left;
  padding-bottom: 20px;
  .el-input {
    width: 80% !important;
  }
  .row {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden;
    .column {
      float: left;
      width: 50%;
    }
    .column:nth-child(2n) {
      float: right;
    }
    .el-form-item__label {
      font-size: 12px;
      color: #bfcbd9;
    }
  }
  .row:nth-child(2) {
    padding-top: 10px;
    border-bottom: 0px;
  }
  .dialog-footer {
    text-align: right;
    padding: 0px 40px;
  }
  .el-dialog__title {
    font-weight: 700;
  }
  .el-select {
    width: 80%;
  }
  .half:nth-child(1) {
    margin-right: 10%;
  }
  .half {
    width: 35%;
  }
}
</style>


